<template>
<div>
   <div class="my_element_ui">
     <h1>{{ $t('home.title') }}</h1>
     <p>{{ $t('home.description') }}</p>
     <p>{{ $t('message') }}</p>
     <button @click="switchLanguage">切换语言</button>
   </div>
  <div class="my_bootstrap">
    <b-button variant="primary">Primary Button</b-button>
    <b-alert show variant="success">BootstrapVue is working!</b-alert>
  </div>
</div>
</template>

<script>
export default {
  name: "HomeView",
  // 动态设置页面标题、关键字和描述等属性
   metaInfo()
    {
      return {
        title: this.$route.meta.title,
        meta: [
          {name: "keywords", content: this.$route.meta.keywords},
          {name: "description", content: this.$route.meta.description},
        ]
      }
    },
  data() {
    return {
    };
  },
  methods: {
    switchLanguage() {
      this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en';
    }
  }
}
</script>

<style scoped>
.my_bootstrap{
  margin-top: 40px;
}
</style>